<template>
  <!-- <Modal
    v-model="show"
    :ref="ref"
    :title="title"
    :transfer="true"
    v-bind="config"
    :width="config.width > 0 ? config.width : width"
  >
    <div class="content">
      <createView :data="dataSet.formData"></createView>
    </div>
    <div slot="footer">
      <Button type="default" @click="cancel">取消</Button>
      <Button type="primary" :loading="loading" @click="ok">确定</Button>
    </div>
  </Modal> -->
    <starModal :ref="ref" :config="config" @click="click">
    <createView :data="dataSet.formData"></createView>
  </starModal>
</template>

<script>
const ref = "createModal";
import createView from "./createView.vue";
export default {
  name: ref,
  components: { createView },
  inject: ["anc"],
    
  data() {
    return {
      ref,
      show: false,
      width: 600,
      loading: false,
      title: "新增",
      config:{
        title: "新增",
        show:false,
        width: 0,
        height: 400,
        draggable: true,
        mask: true,
        closable: true,
        okText: "确定",
        cancelText: "取消",
        widthRatio: 0.5,
      }
    };
  },
  props: {
   
    dataSet: {
      default: () => {
        return {};
      },
    },
    
    // configData: {
    //   type: Object,
    //   default: () => {
    //     return {};
    //   },
    // },
  },
  watch: {
    
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      const obs = new ResizeObserver((entries) => {
        this.width = entries[0].contentRect.width * this.config.widthRatio;
      });
      obs.observe(this.$el);
    });
  },
  methods: {
     click(btn){
      if(btn.text == "确定"){
        btn.loading = true;
        this.config.loading = true;
        this.anc.createModalOk(btn);
      }else{
        this.$set(this.config,'show',false);
      }
      this.config.loading = false;
    }, 
    ok() {
      this.anc.createModalOk();
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>
<style scoped lang="scss">
$top: 40px;
.content {
  position: relative;
  width: 100%;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
